// 获取数据
async function getData() {
  try {
    const res = await axios("/dashboard")
    const { groupData, overview, provinceData, salaryData, year } = res.data
    renderOverview(overview)
    renderMoney(year)
    renderGroup(groupData)
    renderPie(salaryData)
    initMapChart(provinceData)
    renderTwo(salaryData)
  } catch (e) {
    console.dir(e)
  }
}
getData()
// 渲染概览区域
function renderOverview(data) {
  for (const k in data) {
    document.querySelector(`[name="${k}"]`).innerHTML = data[k]
  }
}
// 渲染薪资走势图
function renderMoney(data) {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("line"))
  // 指定图表的配置项和数据
  let option = {
    title: {
      text: "2021全学科薪资走势",
      textStyle: {
        color: "black",
        fontSize: 30,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#5d97ff",
        },
      },
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        type: "line",
        smooth: true,
        symbolSize: 5,
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#f6ea41", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#f048c6", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          width: 7,
        },
        itemStyle: {
          color: "#fff",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#f6ea41", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#f048c6", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
// 画大饼
function renderPie(data) {
  let my = echarts.init(document.getElementById("salary"))
  let option = {
    title: {
      text: "班级薪资分布",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "班级薪资分布",
        type: "pie",
        radius: ["45%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => {
          return {
            value: item.b_count + item.g_count,
            name: item.label,
          }
        }),
      },
    ],
    color: ["#fda224", "#34d39a", "#3fceff", "#5097ff"],
  }
  my.setOption(option)
}
// 画地图
const initMapChart = (data) => {
  const myEchart = echarts.init(document.querySelector("#map"))
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ]
  dataList.map((item) => {
    data.find((v) => {
      if (v.name.indexOf(item.name) === 0) {
        item.value = v.value
      }
    })
  })
  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 15,
      left: "left",
      bottom: "20",
      text: ["15", "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
// 二饼图
function renderTwo(data) {
  let my = echarts.init(document.getElementById("gender"))
  let datas = [
    [
      { name: "圣彼得堡来客", value: 5.6 },
      { name: "陀思妥耶夫斯基全集", value: 1 },
      { name: "史记精注全译（全6册）", value: 0.8 },
      { name: "加德纳艺术通史", value: 0.5 },
    ],
    [
      { name: "银河帝国5：迈向基地", value: 3.8 },
      { name: "俞军产品方法论", value: 2.3 },
      { name: "艺术的逃难", value: 2.2 },
      { name: "第一次世界大战回忆录（全五卷）", value: 1.3 },
    ],
  ]
  datas[0].map((item, i) => {
    item.name = data[i].label
    item.value = data[i].b_count
  })
  datas[1].map((item, i) => {
    item.name = data[i].label
    item.value = data[i].g_count
  })
  option = {
    title: [
      {
        text: "阅读书籍分布",
        textStyle: {
          color: "#333",
          fontWeight: "bold",
          fontSize: 18,
        },
      },
      {
        subtext: "男生",
        left: "50%",
        top: "43%",
        textAlign: "center",
        subtextStyle: {
          color: "#333",
          fontWeight: "bold",
          fontSize: 14,
        },
      },
      {
        subtext: "女生",
        left: "50%",
        bottom: "5%",
        textAlign: "center",
        subtextStyle: {
          color: "#333",
          fontWeight: "bold",
          fontSize: 14,
        },
      },
    ],

    series: datas.map(function (data, idx) {
      let top = idx * 48
      return {
        type: "pie",
        radius: [40, 60],
        top: top + "%",
        height: "50%",
        left: "center",
        width: 400,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        labelLine: {
          length2: 0,
          maxSurfaceAngle: 80,
          normal: {
            length: 25,
          },
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2
          const points = params.labelLinePoints
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width
          return {
            labelLinePoints: points,
          }
        },
        data: data,
      }
    }),
    color: ["#fda224", "#34d39a", "#3fceff", "#5097ff"],
  }
  my.setOption(option)
}
function renderGroup(data) {
  const btn = document.querySelector("#btns")
  const arr = []
  for (const k in data) {
    arr.push(`<button type="button" class="btn btn-xs ">${k}</button> `)
  }
  btn.innerHTML = arr.join("")
  btn.children[0].classList.add("btn-blue")
  let my = echarts.init(document.getElementById("lines"))
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["期望薪资", "实际薪资"],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        data: data[1].map((item) => item.name),
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "期望薪资",
        type: "bar",
        data: data[1].map((item) => item.hope_salary),
      },
      {
        name: "实际薪资",
        type: "bar",
        data: data[1].map((item) => item.salary),
      },
    ],
    color: [
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#ccfbff", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#ef96c5", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#58126a", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#f6b2e1", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
  }
  my.setOption(option)
  document.querySelector("#btns").addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      document.querySelector(".btn-blue").classList.remove("btn-blue")
      e.target.classList.add("btn-blue")
      const index = e.target.innerHTML.trim()
      option.xAxis[0].data = data[index].map((item) => item.name)
      option.series[0].data = data[index].map((item) => item.hope_salary)
      option.series[1].data = data[index].map((item) => item.salary)
      my.setOption(option)
    }
  })
}
